<!-- 配置小区 -->
<!--  -->
<template>
  <div class="CW-B-Bbox">
    <div class="CW-box1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item> -->
        <el-form-item>
          <el-select v-model="formInline.region" placeholder="请选择仓库">
            <el-option label="仓库一" value="shanghai"></el-option>
            <el-option label="仓库二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="Cw-Box-bbody">
      <div class="CW-box2">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" height="30">
          </el-table-column>
          <el-table-column prop="name" label="小区名称" width="100" height="30">
          </el-table-column>
          <el-table-column prop="tuanzhang" label="团长" width="150">
          </el-table-column>
          <el-table-column prop="dianhua" label="电话"></el-table-column>
          <el-table-column prop="luxian" label="路线"> </el-table-column>
          <el-table-column prop="dizhi" label="地址" width="300">
          </el-table-column>

          <el-table-column prop="chaozuo" label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                <el-row>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-row>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="CW-box3">
        <div></div>
        <div></div>
        <div>
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formInline: {
        user: "",
        region: "",
      },
      value: true,
      tableData: [
        {
          id: "1",
          name: "朝阳小区",
          dizhi: "个似懂非懂发施工方顺丰到付……",
          tuanzhang: "李先生",
          dianhua: "15573685647",
          luxian: "路线1",
          chaozuo: "编辑 删除",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.CW-B-Bbox {
  width: 100%;
  height: 100%;
  // background: paleturquoise;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.CW-box1 {
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid #000;
  padding: 5px 0px;
}

.Cw-Box-bbody {
  width: 100%;
  flex: 1;
  // background: rgb(231, 231, 231);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.CW-box2 {
  width: 100%;
  height: 400px;
  // background: rgb(255, 255, 255);
  overflow: hidden;
}
.CW-box3 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: rgb(197, 197, 197);
}
</style>